import React, { useState, useEffect } from "react";
import { connect } from "dva";
import { Input, Card, Menu, Tooltip, Spin, Modal, Icon } from "antd";
import styles from "./index.less";

const OnlineSkillGroup = ({ dispatch, groups, loading, group }) => {
	const [groupList, setGroupList] = useState([]);
	useEffect(() => {
		getGroupList();
	}, []);

	const showAddGroup = () => {
		dispatch({
			type: "onlineSkillSet/showAddGroup",
			payload: {
				visible: true,
			},
		});
	};

	// 删除
	function handleDelete(text) {
		Modal.confirm({
			title: "删除确认",
			content: `确定要删除【${text["groupName"]}】?`,
			okText: "确定",
			cancelText: "取消",
			onOk: () => {
				dispatch({
					type: "onlineSkillSet/deleteGroup",
					payload: { id: text.id },
				});
			},
		});
	}

	// 获取分组列表
	function getGroupList() {
		dispatch({
			type: "onlineSkillSet/getGroupList",
		});
	}

	function handleEdit(editGroup) {
		dispatch({
			type: "onlineSkillSet/showAddGroup",
			payload: {
				editGroup,
				visible: true,
			},
		});
	}

	function handleClick(group) {
		dispatch({
			type: "onlineSkillSet/saveGroup",
			payload: group,
		});
	}

	return (
		<Card
			title='在线技能组'
			extra={
				<Icon
					type='plus'
					style={{ cursor: "pointer" }}
					onClick={showAddGroup}
				/>
			}
			className={styles.group}
			bodyStyle={{ padding: 0 }}
			headStyle={{ padding: "0 10px" }}
			bordered={false}
		>
			<div className={styles.groupList}>
				{groups.map((item, index) => {
					return (
						<div
							className={styles.groupItem}
							key={item.id}
							style={{
								backgroundColor: group.id && group.id === item.id ? "#f5f5f5" : "",
							}}
							onClick={() => {
								handleClick(item);
							}}
						>
							<span>
								<Icon type='team' style={{ margin: "0 5px" }} />
								{item.groupName}
								<Icon
									className={styles.groupEditIcon}
									type='form'
									style={{ margin: "0 5px" }}
									onClick={(e) => {
										e.stopPropagation();
										handleEdit(item);
									}}
								/>
							</span>
							<span className={styles.groupItemIcon}>
								<Icon
									type='delete'
									onClick={(e) => {
										e.stopPropagation();
										handleDelete(item);
									}}
								/>
							</span>
						</div>
					);
				})}
			</div>
		</Card>
	);
};

export default connect(({ onlineSkillSet }) => ({
	...onlineSkillSet,
}))(OnlineSkillGroup);
